---
name: 快速开始
route: /quick-start
menu: General
---

# 快速开始


## 安装依赖

在项目路径下，执行命令
```bash
npm i -S kwai-ui

```



kwai-ui 的样式使用 [styled-components](https://www.styled-components.com/)开发，业务逻辑使用react 16.8之后支持的 [hooks api](https://reactjs.org/docs/hooks-intro.html) 开发
动画依赖[react-spring](https://www.react-spring.io)
如果当前项目中没有安装，需要分别安装以下依赖
```bash
npm i -S styled-components react-spring react@latest react-dom@latest
```

## 项目中引用



```typescript jsx
import {Button,Input,Icon ......} from 'kwai-ui'
```

即可在业务代码中使用kwai ui的组件，具体组件的使用方法参考文档

## 按需引用
kwai-ui 支持组件的按需加载，借助于 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) 可以实现组件的按需加载：

如果使用的是 [react-cli](http://react-cli.test.gifshow.com/getting-started#help)，直接在`start` 或者 `build`命令中加上 `--kwai-ui` 或者 `-k` 的开关即可，

如果是自己配置的webpack，需要安装 babel-plugin-import 模块，参考以下配置：
```javascript
//.babelrc.js
module.exports = {
    "plugins": [
        ["import", {
            libraryName: 'kwai-ui',
            libraryDirectory: 'build',
            // kwai-ui 使用css in js， 没有css文件
            style: () => false,                       
        }, "kwai-ui"]
    ]
}
```

这样，组件模块是按需引用，没有用到的模块不会被打包到业务代码中：
```javascript
import {Input} from 'kwai-ui'

            ↓↓↓
// 会自动转化为单独模块加载，而不会把所有组件都引入
const Input = require('kwai-ui/build/input')

```